<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view style="margin: 10px;">
      <up-form
        labelPosition="left"
        labelWidth="100px"
        :model="model1"
        :rules="rules"
        ref="form1"
      >
        <up-form-item
            label="姓名"
            prop="name"
            borderBottom
            ref="item1"
        >
          <up-input
              v-model="model1.name"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="电话"
            prop="phone"
            borderBottom
            ref="item1"
        >
          <up-input
              v-model="model1.phone"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="地区"
            prop="address"
            borderBottom
            @click="showSex = true; hideKeyboard()"
            ref="item1"
        >
          <ragion v-model:currentVal="model1.address" />
          <template #right>
            <up-icon
              name="arrow-right"
            ></up-icon>
          </template>
        </up-form-item>
        <up-form-item
            label="详细地址"
            prop="num"
            borderBottom
            ref="item1"
        >
          <up-input
              v-model="model1.num"
              placeholder="请填写详细地址门牌号"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="是否设为默认地址"
            prop="isDefault"
            borderBottom
            ref="item1"
            labelWidth="150px"
        >
          <up-switch v-model="model1.isDefault"></up-switch>
        </up-form-item>
      </up-form>
    </view>
    <view class="footer u-p-20">
      <up-button :color="$u.color.mainColor" @click="submit">提交</up-button>
      <u-gap height="10" />
      <up-button :color="$u.color.error" plain @click="onDel">删除地址</up-button>
    </view>
	</view>
</template>


<script>
import ragion from './ragion.vue';
import { useAddrStore } from '@/stores/addr'
export default {
  components: {
    ragion
  },
	data() {
    return {
      model1: {
        name: '',
        phone: '',
        address: '',
        num: '',
        isDefault: false,
      },
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        phone: {
          type: 'string',
          required: true,
          pattern: /^1[3-9]\d{9}$/, // 简单的手机号校验规则
          message: '请输入正确的手机号',
          trigger: ['blur', 'change']
        },
        address: {
          type: 'string',
          required: true,
          message: '请选择地区',
          trigger: ['change']
        },
        num: {
          type: 'string',
          required: true,
          message: '请填写详细地址门牌号',
          trigger: ['blur', 'change']
        },
      },
      addrStore: useAddrStore()
    };
  },
  onLoad() {
    this.model1 = this.addrStore.data || {}
    console.log(this.model1);
  },
	methods: {
    async submit() {
      const valid = await this.$refs.form1.validate()

      if (valid) {
        let data;
        if (!this.model1.id) {
          data = await this.$api.user.addressAdd(this.model1);
        } else {
          data = await this.$api.user.addressUpdate(this.model1);
        }

        if (data.code == 200) {
          this.eventChannel.emit('acceptDataFromOpenedPage', true);
          uni.navigateBack({});
        }
      } else {
        console.log('校验失败');
      }

    },
    onDel() {
      uni.showModal({
        title: '提示',
        content: '是否确认删除该地址？',
        showCancel: true,
        success: async ({ confirm, cancel }) => {
          if (confirm) {
            const res = await this.$api.user.addressDelete({id: this.model1.id})
            if (res.code == 200) {
              uni.navigateBack({});
            }
          }
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  width: calc(100% - 20px);
  height: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}
:deep(.u-form-item__body) {
  padding: 15px 0;
}
</style>